<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单输入绑定</title>
</head>
<body>
你可以用 v-model 指令在表单 input> 及 textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
<div id="example-1">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    <span>多行信息：</span>
    <p sytle="white-space:pre-line">{{ multMessage }}</p>
    <textarea v-model="multMessage" placeholder="添加文本"></textarea>
    <input type="checkbox" id="checkbox" v-model="checked"/>
    <label for="checkbox">{{ checked }}</label>
    <input type="radio" id="One" value="刘德华" v-model="picked"/>
    <label for="One">刘德华</label>
    <input type="radio" id="Two" value="周华健" v-model="picked"/>
    <label for="Two">周华健</label> <span>选了：{{ picked }}</span>
</div>
<div id="example-2">
    <select v-model="selected">
        <option disabled value="">==请选择==</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
        <option value="E">E</option>
    </select>
    <span>选择的值是 {{ selected }}</span>
    <select v-model="selected2">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
</div>
<script type="text/javascript" src="source/vue.js"></script>
<script type="text/javascript">
    var example1 = new Vue({
        el: '#example-1',
        data: {
            message: 123,//初始化值
            multMessage: "",
            checked: true,
            picked: ''
        }
    })
    var example2 = new Vue({
        el: '#example-2',
        data: {
            selected: '',
            options: [
                {text: 'one', value: 'A'},
                {text: 'Two', value: 'B'},
                {text: 'Three', value: 'C'}
            ]
        }
    })
</script>
</body>
</html>